关于 vscode 的一些废话

vscode 的核心组件

• electron: 桌面端框架
• Monaco Editor: 代码编辑器
• TypeScript: 编程语言
• Language Server Protocol: 语言服务器协议
• Debug Adapter Protocol
• xterm.js: web 终端组件

(个人向)vscode 常用插件推荐

不推荐安装的插件列表

• highlight matching tag: 官方已经集成
• npm intellisense: 官方已经集成
• sync setting: 使用自带账号同步的更好
• Project Manager: 自带功能
• JS Refactor: 自带功能
• auto rename tag: vscode自带

开发辅助

• React-Native/React/Redux snippets for es6/es7: 集成大量常用代码片段
• Path Intellisense: 自动路径补全
• surround: 快速代码块包裹
• todo tree: todo 标记快速查找
• change-case: 字符串格式变换
• Vue VSCode Snippets: vue 代码提示
• css peek: 快速跳转css相关代码

工程流辅助

• prettier: 代码格式化
• vetur: 专属于vue的代码格式化插件
• live-serve: 一键开启本地server服务
• live-share: 协同开发
• remote ssh: 远程开发利器
• gitlens: git 增强
• import cost: 库类引入代价

日常实用

• leetcode: 算法刷题神器
• vscode-reveal: PPT速写
• draw.io: 流程图工具
• markdown all in one
• Search/Translate Hero
• REST Client: 替代 postmen
• filesize: 显示当前打开的文件大小, 点击后还可以看到详细创建、修改时间
• fileheader: 文件头输入

娱乐向

• 韭菜小猪
• 小霸王
• vsc-netease-music: 网易云音乐
• daily-anime: 追番动态

vscode 使用技巧

实用的快捷键

1. 古老的emmet

• ! + tab: 生成html结构
• #: ID
• .: class
• >: 子节点
• +: 兄弟节点
• ^: 上级节点
• *: 重复
• (): 分组
• []: 属性
• $: 编号, 一个$一位数, @: 从xx开始递增, 比如$@3, 表示从3开始递增
• {}: 文本

2. 最常用的快捷键

命令窗口:

• command + p: 跳转到最近打开的文件
• control + r: 跳转最近打开的项目
• cmd + shift + p: 命令面板

窗口管理:

• command + tab: 切换tab
• command + \: 切换出一个新的编辑器窗口

格式调整:

• command + [, command + ] 左右缩进
• option + shift + f: 手动格式化代码
• option + up/down: 上下移动当前行
• option + shift + up/down: 上下复制当前行
• command + enter: 下方插入一行
• command + shift + enter: 上方插入一行

光标:

• command + left/right: 行首/行尾
• command + up/down: 文首/文尾
• command + back: 删除光标之前
• command + shift + k: 删除本行
• command + option + up/down: 多光标
• command + d: 选中项匹配

用户代码片段

设置 => 用户代码片段 => 创建不同的用户代码片段

{
    'prefix': 触发短语
    'body': 代码片段内容
    'description:': 片段描述
}

环境变量:

• TM_SELECTED_TEXT 当前选定的文本或空字符串
• TM_CURRENT_LINE 当前行的内容
• TM_CURRENT_WORD 光标下的内容或空字符串
• TM_LINE_INDEX 从零开始的当前行号
• TM_LINE_NUMBER 从一开始的当前行号
• TM_FILENAME 当前文档的文件名
• TM_FILENAME_BASE基当前文档的文件名，不带扩展名
• TM_DIRECTORY当前文档的目录
• TM_FILEPATH 当前文档的完整文件路径
• CLIPBOARD 剪贴板的内容
• WORKSPACE_NAME 打开的工作区或文件夹的名称

日期:

• CURRENT_YEAR 当前年份
• CURRENT_YEAR_SHORT 当前年份的最后两位数字
• CURRENT_MONTH 两位数的当前月份（例如“02”）
• CURRENT_MONTH_NAME 当前月份的英文全名（例如’July’）
• CURRENT_MONTH_NAME_SHORT 当前月份的英文短名称（例如’Jul’）
• CURRENT_DATE 今天几号
• CURRENT_DAY_NAME 英文的星期几（例如’Monday’）
• CURRENT_DAY_NAME_SHORT 英文星期几的短名称（例如’Mon’）
• CURRENT_HOUR 24小时制的当前小时
• CURRENT_MINUTE 当前分钟
• CURRENT_SECOND 当前秒
• CURRENT_SECONDS_UNIX 自格林威治时间以来的秒数(1970年1月1日)

注释, 会跟随语言发生变化:

• BLOCK_COMMENT_START 区块注释开始<!--
• BLOCK_COMMENT_END 区块注释结束-->

文字转换(正则):

• ${TM_FILENAME/[\\.]/_/}

task

• command + shift + B: 运行tasks

task 会自动检测一些命令, 比如 npm, gulp, jake, grunt, typescript

也可以自定义一些任务.

• 自定义任务的类型, 比如shell或者precess
• 定义任务的运行时间和如何运行

复合任务

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Client Build",
      "command": "gulp",
      "args": ["build"],
      "options": {
        "cwd": "${workspaceFolder}/client"
      }
    },
    {
      "label": "Server Build",
      "command": "gulp",
      "args": ["build"],
      "options": {
        "cwd": "${workspaceFolder}/server"
      }
    },
    {
      "label": "Build",
      "dependsOn": ["Client Build", "Server Build"]
    }
  ]
}

build会默认并行运行这两个子任务

也可以通过sequence让两个命令顺序运行

{
  "label": "One",
  "type": "shell",
  "command": "echo Hello ",
  "dependsOrder": "sequence",
  "dependsOn": ["Two", "Three"]
}

这里就会先运行2, 然后运行3, 然后运行1

还有一些其他的控制特性:

• 控制运行任务的时候页面如何显示, 打开终端或者不打开终端
• 控制运行的时机, 比如打开项目的时候就直接自动运行

还可以在任务运行命令中中加入变量, 比如下面这些预定义变量:

• ${workspaceFolder} -在VS Code中打开的文件夹的路径
• ${workspaceFolderBasename} -在VS Code中打开的文件夹名称，不带任何斜杠（/）
• ${file} -当前打开的文件
• ${relativeFile} -当前相对于打开的文件workspaceFolder
• ${relativeFileDirname} -当前打开的文件相对于的目录名workspaceFolder
• ${fileBasename} -当前打开的文件的基本名称
• ${fileBasenameNoExtension} -当前打开的文件的基本名称，没有文件扩展名
• ${fileDirname} -当前打开的文件的目录名
• ${fileExtname} -当前打开的文件的扩展名
• ${cwd} -启动时任务运行程序的当前工作目录
• ${lineNumber} -活动文件中当前选择的行号
• ${selectedText} -活动文件中的当前选定文本
• ${execPath} -正在运行的VS Code可执行文件的路径
• ${defaultBuildTask} -默认构建任务的名称

或者直接获取环境变量:

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js",
  "cwd": "${workspaceFolder}",
  "args": ["${env:USERNAME}"]
}

其他变量

• 获取vscode配置的变量: ${config：Name}
• 使用命令变量: ${command:extension.pickNodeProcess}
• 使用输入变量: ${input:variableID} , 可以选择输入框或者下拉列表或者选取一个命令

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "ng g",
      "type": "shell",
      "command": "ng",
      "args": ["g", "${input:componentType}", "${input:componentName}"]
    }
  ],
  "inputs": [
    {
      "type": "pickString",
      "id": "componentType",
      "description": "What type of component do you want to create?",
      "options": [
        "component",
        "directive",
        "pipe",
        "service",
        "class",
        "guard",
        "interface",
        "enum",
        "enum"
      ],
      "default": "component"
    },
    {
      "type": "promptString",
      "id": "componentName",
      "description": "Name your component.",
      "default": "my-new-component"
    }
  ]
}

应用实例: 选择某个测试用例单独运行

{
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Run specific test",
      "program": "${workspaceFolder}/${input:pickTest}"
    }
  ],
  "inputs": [
    {
      "id": "pickTest",
      "type": "command",
      "command": "extension.mochaSupport.testPicker",
      "args": {
        "testFolder": "/out/tests"
      }
    }
  ]
}

应用命令还能和任务一起运行:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Terminate All Tasks",
      "command": "echo ${input:terminate}",
      "type": "shell",
      "problemMatcher": []
    }
  ],
  "inputs": [
    {
      "id": "terminate",
      "type": "command",
      "command": "workbench.action.tasks.terminate",
      "args": "terminateAll"
    }
  ]
}

进阶: 万物皆虚, 万事皆允

引言: 人人都应该会vscode插件开发

编写vscode插件那点事

• 推荐教程: https://www.cnblogs.com/liuxianan/p/vscode-plugin-overview.html
• 文档: https://code.visualstudio.com/api/references/vscode-api
• 中文文档: https://www.bookstack.cn/read/VS-Code-Extension-Doc-ZH/%E7%AC%AC%E4%B8%80%E7%89%88.md

vscode插件能做的事

• 不受限制的本地资源访问
• 自定义命令, 快捷键, 菜单
• 自定义跳转, 自动补全, 悬浮提示
• 自定义设置, 自定义欢迎页
• 自定义webview
• 自定义颜色, 图标主题
• 新增语言支持
• 等等

快速起步

1. 安装脚手架

npm install -g yo generator-code

2. 运行脚手架

yo code

3. 打开项目, 按f5, 开始开发

主要文件

• extension.js: 项目激活的入口
• package.json: 项目配置

{
    "contributes": {
        "commands": [
            {
                "command": "extension.sayHello",
                "title": "Hello World"
            }
        ],
        // 快捷键绑定
        "keybindings": [
            {
                "command": "extension.sayHello",
                "key": "ctrl+f10",
                "mac": "cmd+f10",
                "when": "editorTextFocus"
            }
        ],
        // 设置菜单
        "menus": {
            "editor/context": [
                {
                    "when": "editorFocus",
                    "command": "extension.sayHello",
                    "group": "navigation"
                }
            ]
        }
    }
}